<template>
    <div>
        <el-card style="margin-top: 20px;">

            <div class="sale-header">
                <!-- 头部左侧--选项卡 -->
                <el-tabs class="left" v-model="activeName">
                    <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                    <el-tab-pane label="访问量" name="visit"></el-tab-pane>
                </el-tabs>
                <!-- 头部右侧内容 -->
                <div class="right">
                    <span @click="getDay">今日</span>
                    <span @click="getWeek">本周</span>
                    <span @click="getMonth">本月</span>
                    <span @click="getYear">本年</span>
                    <el-date-picker style="width: 240px;margin-left: 20px;" v-model="date" value-format="yyyy-MM-dd"
                        size="mini" type="daterange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="sale-content">
                <el-row :gutter="10">
                    <el-col :span="18">
                        <SaleBarChart :title="title"></SaleBarChart>
                    </el-col>
                    <el-col :span="6">
                        <h4>门店{{title}}排名</h4>
                        <ul>
                            <li>
                                <span class="activeIndex">1</span>
                                <span>肯德基</span>
                                <span class="value">1265656</span>
                            </li>
                            <li>
                                <span class="activeIndex">2</span>
                                <span>麦当劳</span>
                                <span class="value">1022356</span>
                            </li>
                            <li>
                                <span class="activeIndex">3</span>
                                <span>星巴克</span>
                                <span class="value">965321</span>
                            </li>
                            <li>
                                <span class="index">4</span>
                                <span>瑞幸</span>
                                <span class="value">895561</span>
                            </li>
                            <li>
                                <span class="index">5</span>
                                <span>海底捞</span>
                                <span class="value">765321</span>
                            </li>
                            <li>
                                <span class="index">6</span>
                                <span>CoCo</span>
                                <span class="value">423513</span>
                            </li>
                            <li>
                                <span class="index">7</span>
                                <span>蜜雪冰城</span>
                                <span class="value">98622</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>
<script>
    import SaleBarChart from './SaleBarChart/index'
    import dayjs from 'dayjs'
    export default {
        name: "Sale",
        components: {
            SaleBarChart
        },
        computed: {
            title() {
                return this.activeName == 'sale' ? '销售额' : '访问量'
            }
        },
        data() {
            return {
                activeName: 'sale',
                date: [], //收集时间
            }
        },
        methods: {
            getDay() {
                const day = dayjs().format('YYYY-MM-DD');
                this.date = [day, day]
            },
            getWeek() {
                const weekStart = dayjs().day(1).format('YYYY-MM-DD');
                const weekEnd = dayjs().day(7).format('YYYY-MM-DD');
                this.date = [weekStart, weekEnd]
            },
            getMonth() {
                const monthStart = dayjs().startOf('month').format('YYYY-MM-DD');
                const monthEnd = dayjs().endOf('month').format('YYYY-MM-DD');
                this.date = [monthStart, monthEnd]
            },
            getYear() {
                const yearStart = dayjs().startOf('year').format('YYYY-MM-DD');
                const yearEnd = dayjs().endOf('year').format('YYYY-MM-DD');
                this.date = [yearStart, yearEnd]
            }
        },
    }
</script>
<style scoped>
    .sale-header {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .left {
        width: 100%;
    }

    .right {
        position: absolute;
        right: 20px;
    }

    .right span {
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s linear;
    }

    .right span:hover {
        color: #999;
    }

    .sale-content ul {
        height: 300px;
        width: 100%;
        list-style: none;
        padding-left: 0px;
    }

    .sale-content ul li {
        height: 16%;
    }

    .sale-content ul li span {
        margin-right: 20px;
    }

    .sale-content .index {
        display: inline-block;
        width: 25px;
        text-align: center;
    }

    .sale-content .activeIndex {
        background-color: #886dff;
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        border-radius: 50%;
        text-align: center;
        color: #fff;
    }

    .sale-content .value {
        float: right;
    }
</style>